<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" v-show="showSearch" class="ml10">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
          <el-form-item label="学校" prop="schoolId">
            <el-select v-model="state.queryForm.schoolId" placeholder="请选择学校" style="width: 100%" @change="(item: any)=> getGradeList(item)">
              <el-option v-for="item in data.schoolList" :key="item.id" :label="item.schoolName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级" prop="gradeId">
            <el-select v-model="state.queryForm.gradeId" placeholder="请选择年级" style="width: 100%" @change="(item: any)=> getClassesList(item)">
              <el-option v-for="item in data.gradeList" :key="item.id" :label="item.gradeName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="classesId">
            <el-select v-model="state.queryForm.classesId" placeholder="请选择班级" style="width: 100%">
              <el-option v-for="item in data.classesList" :key="item.id" :label="item.classesName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-date-picker
              v-model="state.queryForm.date"
              type="daterange"
              format="YYYY-MM-DD"
              date-format="YYYY-MM-DD"
              start-placeholder="请选择开始时间"
              end-placeholder="请选择结束时间"
          />
          </el-form-item>
          <el-form-item label="学生姓名" prop="name">
            <el-input placeholder="请输入学生姓名" v-model="state.queryForm.name" />
          </el-form-item>
          <el-form-item label="学号" prop="studentId">
            <el-input placeholder="请输入学号" v-model="state.queryForm.studentId" />
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">

          <right-toolbar
              v-model:showSearch="showSearch"
              class="ml10"
              style="float: right; margin-right: 20px"
              @queryTable="getDataList"
          ></right-toolbar>
        </div>
      </el-row>
      <el-table
          :data="state.dataList"
          v-loading="state.loading"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          :cell-style="tableStyle.cellStyle"
          :header-cell-style="tableStyle.headerCellStyle"
      >
        <el-table-column type="selection" :selectable="handleSelectable" width="50" align="center" />
        <el-table-column type="index" label="#" width="80" />
        <el-table-column prop="date" label="预约时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="schoolName" label="学校" show-overflow-tooltip></el-table-column>
        <el-table-column prop="gradeName" label="年级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="classesName" label="班级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentId" label="学号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentName" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="comboName" label="套餐名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dishName" label="套餐子菜" show-overflow-tooltip></el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>

    <!-- 导入角色 -->
    <upload-excel
        ref="excelUploadRef"
        :title="$t('sysuser.importUserTip')"
        url="/admin/role/import"
        temp-url="/admin/sys-file/local/file/role.xlsx"
        @refreshDataList="getDataList"
    />

  </div>
</template>

<script setup lang="ts" name="systemRole">
import { BasicTableProps, useTable } from '/src/hooks/table';
import { pageList } from '/src/api/school/studentCombo';
import { useMessage, useMessageBox } from '/src/hooks/message';
import {listAll as listAllSchool }from '/src/api/school/school'
import {listAll as listAllGrade }from '/src/api/school/grade'
import {listAll as listAllClasses }from '/src/api/school/classes'
import { useI18n } from 'vue-i18n';
import dayjs from "dayjs";

// 引入组件
const { t } = useI18n();

// 定义变量内容
const roleDialogRef = ref();
const permessionRef = ref();
const excelUploadRef = ref();
const queryRef = ref();
const showSearch = ref(true);
// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);

const pageDataInfo = (params: any)=>{
  if(params.date){
    params.startTime = dayjs(params.date[0]).format('YYYY-MM-DD')
    params.endTime = dayjs(params.date[1]).format('YYYY-MM-DD')
  }
  return pageList(params)
}

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    roleName: '',
  },
  pageList: pageDataInfo, // H
  descs: ['create_time'],
});



const data = reactive({
  schoolList: [],
  gradeList:[],
  classesList:[]
})

onMounted(()=>{
  getSchoolList();
})



//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  getDataList();
  getSchoolList();
};


const getSchoolList = async ()=>{
  data.gradeList = [];
  data.schoolList = [];
  data.classesList = [];
  const resp = await listAllSchool();
  data.schoolList = resp.data
}

const getGradeList = async (schoolId: string)=>{
  data.gradeList = [];
  data.classesList = [];
  const resp = await listAllGrade({schoolId});
  data.gradeList = resp.data
}

const getClassesList = async (gradeId: string)=>{
  data.classesList = [];
  const resp = await listAllClasses({gradeId});
  data.classesList = resp.data
}


// 导出excel
const exportExcel = () => {
  downBlobFile('/admin/role/export', state.queryForm, 'role.xlsx');
};

// 是否可以多选
const handleSelectable = (row: any) => {
  return row.roleId !== '1';
};

// 多选事件
const handleSelectionChange = (objs: { roleId: string }[]) => {
  selectObjs.value = objs.map(({ roleId }) => roleId);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await delObj(ids);
    getDataList();
    useMessage().success(t('common.delSuccessText'));
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
</script>
